<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width"> 
    <title>Bullet Navigator Skin 18 - Jssor Slider, Slideshow with Javascript Source Code</title>
</head> 
<body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
    <script type="text/javascript" src="../js/jssor.core.js"></script>
    <script type="text/javascript" src="../js/jssor.utils.js"></script>
    <script type="text/javascript" src="../js/jssor.slider.js"></script>
    <script>
        jssor_slider1_starter = function (containerId) {

            var options = {
                $AutoPlay: false,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500

                $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 10,                                  //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                }
            };

            var jssor_slider1 = new $JssorSlider$(containerId, options);
        }
    </script>

    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. --> 
    <div id="slider1_container" style="position: relative; width: 600px;
        height: 300px; overflow: hidden;">
 
        <!-- Slides Container --> 
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div><img u="image" src="../img/photography/002.jpg" /></div>
            <div><img u="image" src="../img/photography/003.jpg" /></div>
            <div><img u="image" src="../img/photography/004.jpg" /></div>
            <div><img u="image" src="../img/photography/005.jpg" /></div>
        </div>

        <!-- Bullet Navigator Skin Begin -->
        <style>
            /* jssor slider bullet navigator skin 18 css */
            /*
            .jssorb18 div           (normal)
            .jssorb18 div:hover     (normal mouseover)
            .jssorb18 .av           (active)
            .jssorb18 .av:hover     (active mouseover)
            .jssorb18 .dn           (mousedown)
            */
            .jssorb18 div, .jssorb18 div:hover, .jssorb18 .av
            {
                background: url(../img/b18.png) no-repeat;
                overflow:hidden;
                cursor: pointer;
            }
            .jssorb18 div { background-position: -3px -3px; }
            .jssorb18 div:hover, .jssorb18 .av:hover { background-position: -33px -3px; }
            .jssorb18 .av { background-position: -63px -3px; }
            .jssorb18 .dn, .jssorb18 .dn:hover { background-position: -93px -3px; }
            
            .jssorb18 .n
            {
                display: none;
                color: #000;
            }
            .jssorb18 div:hover .n, .jssorb18 .av .n, .jssorb18 .av:hover .n, .jssorb18 .dn .n { display: block; }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb18" style="position: absolute; bottom: 16px; right: 6px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="position: absolute; width: 24px; height: 24px; text-align: center;
                line-height: 24px; font-size: 16px;">
                <Numbertemplate class=n></Numbertemplate>
            </div>
        </div>
        <!-- Bullet Navigator Skin End -->

        <a style="display: none" href="http://www.jssor.com">javascript</a> 
        <!-- Trigger --> 
        <script>
            jssor_slider1_starter('slider1_container');
        </script> 
    </div> 
    <!-- Jssor Slider End --> 
</body> 
</html>